<template>
 <div class="module-page">
   <div class="module-page-left">
    <div class="module-page-left-top">
      <div v-for="(item,index) in moudleList" :key="index" class="module-page-left-top-item" :class="`ml${index}`">
      <img class="module-page-left-top-img" :src="item.url" alt="" srcset="">
      <div class="module-page-left-top-item-lable">{{item.lable}}</div>
      </div>
    </div>
    <div class="module-page-left-bottom">操作</div>
   </div>
   <div class="module-page-center">
    <div class="module-page-pz0">
      <div class="module-page-pz loines1">
       <div class="w1425 w1425-hover">
        <img src="@/assets/img/m1.png" class="w1425i">
         <div>拾取A组模型</div>
       </div>
       <div class="w1425 displayline">
       <div class="m12 w1425-hover">
        <img src="@/assets/img/m1.png" class="w1425A">
         <div>删减模型</div>
       </div>
       <div class="m12 mt10 w1425-hover">
        <img src="@/assets/img/m1.png" class="w1425A">
         <div>清空模型</div>
       </div>
      </div>
    </div>
     <div class="module-page-pz ">
         <div class="w1425 w1425-hover">
        <img src="@/assets/img/m1.png" class="w1425i">
         <div>拾取B组模型</div>
       </div>
       <div class="w1425 displayline">
       <div class="m12 w1425-hover">
        <img src="@/assets/img/m1.png" class="w1425A">
         <div>删减模型</div>
       </div>
       <div class="m12 mt10 w1425-hover">
        <img src="@/assets/img/m1.png" class="w1425A">
         <div>清空模型</div>
       </div>
       </div>
    </div>
    </div>
    <div class="modulebottom">设置检测模型</div>
   </div>
   
 </div>
 <div class="drawer-more">
<moduleDrawer/>
 
 
 
<div>
  
</div>
 </div>
  
</template>
<script setup lang='ts'>
import { ref  } from 'vue'
  import moduleDrawer from '@/components/modelPage/moduleDrawer.vue';
   
   
import m1 from "../../assets/img/m1.png" 
import m2 from "../../assets/img/m2.png" 
import m3 from "../../assets/img/m3.png" 
import m4 from "../../assets/img/m4.png" 
import m5 from "../../assets/img/m5.png" 
import m6 from "../../assets/img/m6.png" 

import m7 from "../../assets/img/m7.png" 
import m8 from "../../assets/img/m8.png" 
import m9 from "../../assets/img/m9.png" 
import m10 from "../../assets/img/m10.png" 
import m11 from "../../assets/img/m11.png" 
import m12 from "../../assets/img/m12.png" 
import m13 from "../../assets/img/m13.png" 
import m14 from "../../assets/img/m14.png" 
import m15 from "../../assets/img/m15.png" 
import m16 from "../../assets/img/m16.png" 
import m17 from "../../assets/img/m17.png" 
import m18 from "../../assets/img/m18.png" 
import m19 from "../../assets/img/m19.png" 
 
 
const moudleList = ref([
  {lable:"A组模型检测",id:0,url:m1},
  {lable:"全局碰撞检测",id:1,url:m2},
  {lable:"高亮显示",id:2,url:m3},
  {lable:"B组模型检测",id:3,url:m4},
  {lable:"终止检测",id:4,url:m5},
  {lable:"导出结果",id:5,url:m6},
])
const moudleList2 = ref([
  {lable:"拾取A组模型",id:7,url:m7},
  {lable:"删减模型",id:8,url:m8},
  {lable:"清空模型",id:9,url:m9} 
])
const moudleList3=[
  {lable:"拾取B组模型",id:16,url:m7},
  {lable:"删减模型",id:17,url:m7},
  {lable:"清空模型",id:18,url:m7} 
] 
  
</script>
<style scoped lang="scss"> 
@import url("./css/modelPagePZ.scss");
</style>